<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            border: 0;
            box-sizing: border-box;
        }
    </style>
    <style>
        body {
            margin: 0;
            font-size: 4vw;
            line-height: 1.5;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #banner {
            position: relative;
            width: 100vw;
            overflow: hidden;
            text-align: center;
        }

        #banner_pic {
            display: flex;
            transform: translateX(0);
        }

        #banner_pic li {
            flex: none;
            width: 100vw;
        }

        #banner_pic img {
            display: block;
            width: 100%;
        }

        #banner_nav {
            position: absolute;
            left: 10vw;
            bottom: 2vw;
        }

        #banner_nav span {
            float: left;
            margin: 0 .5vw;
            width: 4vw;
            height: 1vw;
            background: #fff;
        }

        #banner_nav span.active {
            background: blue;
        }
    </style>
    <script src="./js/babel.js" defer></script>
    <script src="./js/gesture.js" type="text/babel"></script>
    <script src="./js/Carousel.js" type="text/babel"></script>
</head>
<body>
    <!--很多没写完 有需要再来写-->
    <div class="container">
        <div class="speedBar">
            <span>浏览进度</span>
            <div class="bar">
                <div class="bared"></div>
            </div>
        </div>
        <div class="banner">
            <div class="imgs">
                <div id="banner">
                    <ul id="banner_pic">
                        <li>
                            <img src="./assets/img/banner.png" alt="">
                        </li>
                        <li>
                            <img src="https://static001.geekbang.org/resource/image/bb/21/bb38fb7c1073eaee1755f81131f11d21.jpg" />
                        </li>
                        <li>
                            <img src="https://static001.geekbang.org/resource/image/1b/21/1b809d9a2bdf3ecc481322d7c9223c21.jpg" />
                        </li>
                        <li>
                            <img src="https://static001.geekbang.org/resource/image/b6/4f/b6d65b2f12646a9fd6b8cb2b020d754f.jpg" />
                        </li>
                        <li>
                            <img src="https://static001.geekbang.org/resource/image/73/e4/730ea9c393def7975deceb48b3eb6fe4.jpg" />
                        </li>
                    </ul>
                    <nav id="banner_nav">
                        <span class="active"></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </nav>
                </div>
            </div>
            <div class="decorate">        
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="375" height="37" viewBox="0 0 375 37">
                <image id="banner_bottom" width="375" height="37" xlink:href=""/>
            </svg>
            </div>
        </div>
        <div class="bannersub">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="375" height="37" viewBox="0 0 375 37">
                <image id="kaiheyouxi" width="375" height="37" xlink:href=""/>
              </svg>
        </div>
        <div class="twoItmes">
            <div class="item1"> 
            <svg id="尖货抽签" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="174" height="90" viewBox="0 0 174 90">
                <rect id="矩形" width="174" height="90" rx="10" fill="#fff"/>
                <text id="尖货抽签-2" data-name="尖货抽签" transform="translate(42 27)" font-size="16" font-family="YuGothicUI-Regular, Yu Gothic UI"><tspan x="-32" y="0">尖</tspan><tspan y="0" font-family="MicrosoftJhengHeiUIRegular, Microsoft JhengHei UI">货</tspan><tspan y="0">抽</tspan><tspan y="0" font-family="MicrosoftJhengHeiUIRegular, Microsoft JhengHei UI">签</tspan></text>
                <image id="手办" width="70" height="70" transform="translate(96 10)" xlink:href=""/>
            </svg>
            </div> 
            <div class="item2">
                <svg id="新品日历" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="174" height="90" viewBox="0 0 174 90">
                    <rect id="矩形" width="174" height="90" rx="10" fill="#fff"/>
                    <text id="新品日历-2" data-name="新品日历" transform="translate(47 30)" font-size="16" font-family="YuGothicUI-Regular, Yu Gothic UI"><tspan x="-32" y="0">新品日</tspan><tspan y="0" font-family="MicrosoftJhengHeiUIRegular, Microsoft JhengHei UI">历</tspan></text>
                    <image id="鞋子" width="70" height="70" transform="translate(87 10)" xlink:href=""/>
                  </svg>
            </div>
        </div>
        <div class="bannerItems">
            <div>
            <svg id="我的品牌" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="355" height="146" viewBox="0 0 355 146">
            <defs>
              <clipPath id="clip-path">
                <rect id="矩形" width="355" height="146" rx="10" fill="#fff"/>
              </clipPath>
              <linearGradient id="linear-gradient" y1="1" x2="0.384" y2="1" gradientUnits="objectBoundingBox">
                <stop offset="0" stop-color="#e3d6b4"/>
                <stop offset="1" stop-color="#cdb591"/>
              </linearGradient>
              <image id="image" width="72" height="72" xlink:href=""/>
            </defs>
            <rect id="矩形-2" data-name="矩形" width="355" height="146" rx="10" fill="#fff"/>
            <g id="我的品牌-2" data-name="我的品牌" clip-path="url(#clip-path)">
              <text id="我的品牌-3" data-name="我的品牌" transform="translate(42 28)" font-size="16" font-family="YuGothicUI-Regular, Yu Gothic UI"><tspan x="-32" y="0">我的品牌</tspan></text>
              <g id="编组" transform="translate(10 38)">
                <rect id="矩形-3" data-name="矩形" width="72" height="72" rx="10" fill="#f5f5f5"/>
                <use id="电脑" xlink:href="#image"/>
              </g>
              <rect id="矩形-4" data-name="矩形" width="72" height="72" rx="10" transform="translate(90 38)" fill="#f5f5f5"/>
              <path id="矩形-5" data-name="矩形" d="M0,0H28.5A7.5,7.5,0,0,1,36,7.5v0A7.5,7.5,0,0,1,28.5,15H7.5A7.5,7.5,0,0,1,0,7.5V0A0,0,0,0,1,0,0Z" transform="translate(90 95)" fill="rgba(0,0,0,0.2)"/>
              <text id="推荐" transform="translate(108 109)" fill="#fff" font-size="11" font-family="YuGothicUI-Regular, Yu Gothic UI"><tspan x="-11" y="0">推荐</tspan></text>
              <g id="编组-2" data-name="编组" transform="translate(170 38)">
                <rect id="矩形-6" data-name="矩形" width="72" height="72" rx="10" fill="#f5f5f5"/>
                <use id="位图" xlink:href="#image"/>
                <path id="矩形-7" data-name="矩形" d="M0,0H28.5A7.5,7.5,0,0,1,36,7.5v0A7.5,7.5,0,0,1,28.5,15H7.5A7.5,7.5,0,0,1,0,7.5V0A0,0,0,0,1,0,0Z" transform="translate(0 57)" fill="rgba(0,0,0,0.2)"/>
                <text id="推荐-2" data-name="推荐" transform="translate(18 71)" fill="#fff" font-size="11" font-family="YuGothicUI-Regular, Yu Gothic UI"><tspan x="-11" y="0">推荐</tspan></text>
              </g>
              <g id="编组-3" data-name="编组" transform="translate(250 38)">
                <rect id="矩形-8" data-name="矩形" width="72" height="72" rx="10" fill="#f5f5f5"/>
                <use id="位图-2" data-name="位图" xlink:href="#image"/>
              </g>
              <g id="编组-4" data-name="编组" transform="translate(330 38)">
                <rect id="矩形-9" data-name="矩形" width="72" height="72" rx="10" fill="#f5f5f5"/>
                <use id="位图-3" data-name="位图" xlink:href="#image"/>
              </g>
              <text id="Apple" transform="translate(46 130)" fill="#a18d67" font-size="12" font-family="SegoeUI, Segoe UI"><tspan x="-15.516" y="0">Apple</tspan></text>
              <text id="Sony" transform="translate(126 130)" fill="#a18d67" font-size="12" font-family="SegoeUI, Segoe UI"><tspan x="-13.002" y="0">Sony</tspan></text>
              <text id="VIISHOW" transform="translate(206.5 130)" fill="#a18d67" font-size="12" font-family="SegoeUI, Segoe UI"><tspan x="-24.349" y="0">VIISHOW</tspan></text>
              <text id="Uniqlo" transform="translate(286 130)" fill="#a18d67" font-size="12" font-family="SegoeUI, Segoe UI"><tspan x="-17.473" y="0">Uniqlo</tspan></text>
              <path id="矩形-10" data-name="矩形" d="M7,0H43a7,7,0,0,1,7,7V7a7,7,0,0,1-7,7H0a0,0,0,0,1,0,0V7A7,7,0,0,1,7,0Z" transform="translate(78 13)" fill="url(#linear-gradient)"/>
              <text id="正在上新" transform="translate(103 26)" fill="#fff" font-size="10" font-family="YuGothicUI-Regular, Yu Gothic UI"><tspan x="-20" y="0">正在上新</tspan></text>
            </g>
          </svg>
          </div>
        </div>
        <div class="cate">
                <div class="cate1">热度新品</div>
                <div class="cate2">刚刚直降</div> 
        </div>
        <div class="showItems">
            <div>
                <img src="./assets/img/airpods.png" alt="">
                <img src="./assets/img/applewatch.png" alt="">
            </div>
        </div>
    </div>
    <script src="./js/script.js"></script>
    <script type="text/babel">
        {
            new Carousel({
                imgList:document.querySelector("#banner_pic"),
                navs:document.querySelectorAll("#banner_nav span")
            });
        }
    </script>
</body>
</html>